<template>

<div class="log">
<div class="logk">
    <van-icon class="icon" name="fire-o" />
    <div class="ltext">网易严选</div>
</div>
</div>

    <div class="zk">
        <van-form>
            <van-cell-group inset>
  <!-- 输入手机号，调起手机号键盘 -->
         <van-field 
         :rules="[{ pattern, message: '请输入正确手机号' }]"
         v-model="phones" type="tel" placeholder="请输入手机号"/>
  <!-- 输入密码 -->
         <van-field 
         :rules="[{ required: true, message: '请填写密码' }]"
         v-model="passwords" type="password" placeholder="请输入密码"/>
         <van-field 
         :rules="[{ required: true, message: '请填写密码' }]"
         v-model="codes" type="tel" placeholder="输入验证码"/>
     </van-cell-group>
        </van-form>
     <div class="btm">

        <div>
            <van-button class="hq" type="primary" size="mini"
            @click="getcod"
            >获取验证码</van-button>

            <van-button  type="primary" size="mini"
            @click="getzh"
            >注册</van-button>

        </div>

        <div>
            <van-button class="godl" @click="go" type="primary" size="mini">去登录</van-button>
        </div>

     </div>
    </div>
    <van-toast></van-toast>
</template>

<script setup lang="ts">
import {getcode,enroll} from'@/api/login/index'
import {ref} from'vue'
import { useRouter } from 'vue-router';
import {useloginstore} from '@/stores/login'
import { storeToRefs } from 'pinia';
import { showSuccessToast, showFailToast } from 'vant';

const pattern =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

let phones=ref()
let passwords=ref()
let codes=ref()
let router = useRouter()

let loginstore = useloginstore()
let {mphone} =storeToRefs(loginstore)
interface  zc {
    phone:number | string 
    code:number | string 
    password:number | string 
}

let getcod=async ()=>{
 let a=phones.value
 let cod=await getcode(a)
 codes.value=cod.data
}

let getzh=async ()=>{
let phone=phones.value
let password=passwords.value
let code=codes.value
let datas:any ={
    phone,password,code
}

 let data :any= await enroll(datas)
 
 if (data.code===200) {
    mphone.value=phones.value
    showSuccessToast(data.message);
    router.push({path:'/u/login'})
 }else{
    showFailToast(data.message);
 }
 
}

let go = ()=>{
    router.push({path:'/u/login',replace: true})
}
</script>

<style lang="less" scoped>
    .log{
        width: 100%;
        margin-top: 100px;
        display:flex;
        .logk{
          display: flex;
          font-weight: bold;
          margin: auto;
          .ltext{
            font-size: 25px;
          }
        }
    }
    .zk{
        margin-top: 50px;
        .van-cell-group {
                .van-cell{
                    height: 65px;
                }
            }

        .btm{
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .hq{
                margin-right: 10px;
            }
            .godl{
                margin-right: 20px;
            }
        }
    }
</style>